<template>
  <div class="home">
    <nav-bar class="nav-bar">
      <div slot="center">商城</div>
    </nav-bar>
    <tab-control
      :titles="['流行', '新款', '精选']"
      class="tab-control controlfix"
      ref="control2"
      @currentindex="clickindex"
      v-show="controlFix"
    ></tab-control>
    <common-scroll
      class="content"
      ref="scroll"
      @getPosition="watchscroll"
      :probe-type="3"
      @loadMore="loadmore"
      :pull-up-load="true"
    >
      <common-swiper :padding-bottom="'52%'" :banner="banner" />
      <home-recommend :recommend="recommend"></home-recommend>
      <feature></feature>
      <tab-control
        :titles="['流行', '新款', '精选']"
        class="tab-control"
        ref="control1"
        @currentindex="clickindex"
      ></tab-control>
      <goods-list :list="showGoods"></goods-list>
    </common-scroll>
    <back-top @backtop="backTop" v-show="isShowTop"></back-top>
  </div>
</template>

<script>
import TabControl from "components/content/tabcontrol/TabControl";
import GoodsList from "components/content/goodslist/GoodsList";

import HomeRecommend from "./childComps/HomeRecommend";
import Feature from "./childComps/Feature";

import { HomeRequest, HomeGoods } from "network/home";

import { debounce } from "@/common/utils/debounce.js";

import { backTopMixin } from "utils/mixins";

export default {
  name: "Home",
  data() {
    return {
      banner: [],
      recommend: [],
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] }
      },
      currentType: "pop",
      isShowTop: false,
      offsettop: 0,
      controlTop: 0,
      controlFix: false
    };
  },
  components: {
    TabControl,
    GoodsList,
    HomeRecommend,
    Feature
  },
  mixins: [backTopMixin],
  created() {
    // 轮播图请求
    this.HomeRequest();

    // 各类别商品的请求
    this.HomeGoods("pop");
    this.HomeGoods("new");
    this.HomeGoods("sell");
  },
  mounted() {
    var refresh = debounce(this.$refs.scroll.refresh, 500);
    // 使用事件总线传递事件，监听图片加载完成后刷新better-scroll
    this.$bus.$on("itemimgload", () => {
      refresh();
    });
  },
  computed: {
    showGoods() {
      return this.goods[this.currentType].list;
    }
  },
  // 页面销毁时触发的生命周期函数
  // destroyed() {
  //   console.log("我被销毁了");
  // },
  activated() {
    //使用keepAlive时的生命周期函数：页面打开时触发
    setTimeout(() => {
      this.$refs.scroll.scrollTo(0, this.offsettop, 0);
    }, 0);
  },
  deactivated() {
    //使用keepAlive时的生命周期函数：页面关闭时触发
    this.offsettop = this.$refs.scroll.scroll.absStartY;
  },
  methods: {
    /**
     * 网络请求
     */
    // 轮播图等数据的请求
    HomeRequest() {
      HomeRequest().then(res => {
        this.banner = res.data.data.banner.list.map(item => {
          return item.image;
        });

        this.recommend = res.data.data.recommend.list;
      });
    },
    // 商品请求
    HomeGoods(type) {
      var page = this.goods[type].page + 1;
      HomeGoods(type, page).then(res => {
        this.goods[type].list.push(...res.data.data.list);
        this.goods[type].page++;
      });
    },

    /*
     *事件监听相关
     */
    //切换
    clickindex(index) {
      switch (index) {
        case 0:
          this.currentType = "pop";
          break;
        case 1:
          this.currentType = "new";
          break;
        case 2:
          this.currentType = "sell";
      }
      // 同步两个tabControl组件的index值
      this.$refs.control1.currentIndex = index;
      this.$refs.control2.currentIndex = index;
    },

    // 滚动监听，设置backtop按钮的显示与隐藏
    watchscroll(position) {
      if (this.controlTop) {
        this.controlFix = -position.y > this.controlTop;
      } else {
        this.controlTop = this.$refs.control1.$el.offsetTop;
      }
      this.isShowTop = -position.y > 1000;
    },

    //上拉加载更多
    loadmore() {
      this.HomeGoods(this.currentType);
      this.$refs.scroll.finishPullUp();
    }
  }
};
</script>

<style scoped>
.home {
  height: 100vh;
  position: relative;
}
.nav-bar {
  background: #ff5777;
  color: white;
  font-size: 18px;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 9;
}
.home-swiper {
  margin-top: 44px;
  background: white;
}
.tab-control {
  position: sticky;
  top: 44px;
  margin-bottom: 10px;
}
.controlfix {
  position: relative;
  z-index: 9;
  top: 44px;
  left: 0px;
}
.content {
  position: absolute;
  top: 43px;
  bottom: 49px;
  left: 0px;
  right: 0px;
  overflow: hidden;
  background: white;
}
</style>
